<template>
	<view>
		<view class="top_but">
			<view class="banmi_flex j-b">
				<view class="banmi_flex j-c a-c" style="width: 180rpx;height: 100rpx;">
					<text>日志</text>
				</view>
				<view class="">
					<button @click="on_close" class="banmi_flex j-c a-c" style="width: 120rpx;height: 100rpx;">
						<text>关闭</text>
					</button>
				</view>
			</view>
		</view>

		<view style="padding:  0 20rpx;">
			<view class="banmi_flex" style="padding-top: 20rpx;">
				<view class="" style="width: 100%;">
					<scroll-view class="" scroll-y="true" style="height: 700px;">
						<view class="" id="bm_top_height">
							<view class="p-b-20">
								<view class="banmi_flex a-c p-t-b-10">
									<view class=" " style="width: 100%;">
										<uni-data-select @change="change_dbname" :localdata="list" placeholder="选择数据表">
										</uni-data-select>
									</view>
								</view>
							</view>
							<view class="f-w-800 m-l-10 p-b-10">
								配置查询条件
							</view>
							<view class="p-b-10  a-c" style="flex-wrap: wrap;display: flex;width: 90%;">
								<view style="margin: 10rpx;" v-for="(item,index) in where_data" :key="index">
									<button v-if="item.input_box!='select'" @click="on_where_data(index)"
										class="banmi_flex j-c a-c diy_code_tab_name" draggable="true"
										style="font-size: 15px;color: #A9A9A9;padding: 0 20rpx;">
										<text>{{item.placeholder}}</text>
									</button>
									<view v-else class="banmi_flex j-c a-c diy_code_tab_name" draggable="true"
										style="font-size: 15px;color: #A9A9A9;padding: 0 20rpx;width: 150px;">
										<uni-data-select :localdata="item.input_box_val">
										</uni-data-select>
									</view>

									<view @click="on_where_data_del(index)"
										style="position:  absolute;margin-top: -75rpx;">
										<button class="q-y banmi_flex j-c a-c xclosed">
											<text class="cff" style="margin-top: -10rpx;">x</text>
										</button>
									</view>
								</view>
								<view class="m-l-10 banmi_flex">
									<view class="" v-for="(item,index) in button_data" :key="index"
										style="padding: 0 7rpx;">
										<button class="diy_code_tab_name banmi_flex a-c j-c"
											@click="on_button_data(index)"
											style="width: 60px;border:#A9A9A9 1px dashed;background-color: #007aff;color: #fff;font-size: 26rpx;">{{item.text}}</button>

										<view @click="on_button_data_del(index)" class=""
											style="position:  absolute;margin-top: -75rpx;">
											<button class="q-y banmi_flex j-c a-c xclosed">
												<text class="cff" style="margin-top: -8rpx;">x</text>
											</button>
										</view>
									</view>
								</view>

							</view>

						</view>


						<view v-if="is_top_height">
							<uni-table border stripe type="selection" :type="'2'" @selection-change="selectionData"
								style="width: 1050px;height: 500px;">
								<uni-tr style=" position:sticky;top: 0;z-index: 1;">
									<uni-th draggable="true" align="center" v-for="(vo,index) in diy_list" :key="index"
										width="150" :class="vo.way == 'field'?'':'operate_right'"
										style="border:#A9A9A9 1px dashed;">
										<view class="">
											<input type="text" v-model="vo.name">
											<view class="p-t-10" v-if="vo.way=='field'">
												<uni-data-select :value="vo.type" :clear="false" :index="index"
													:localdata="field_type_list" @change="change_type_list">
												</uni-data-select>
											</view>
										</view>
										<view @click="on_list_del(index)" class=""
											style="position:absolute;margin-top: -150rpx;margin-left: 130px;">
											<button class="q-y banmi_flex j-c a-c xclosed  ">
												<text class="cff" style="margin-top: -8rpx;">x</text>
											</button>
										</view>
									</uni-th>
								</uni-tr>
								<uni-tr v-for="(item,index1) in db_name_list" :key="index1">
									<uni-td align="center" width="150" v-for="(vo,index) in diy_list"
										:class="vo.way == 'field'?'':'operate_right'"
										:buts="vo.way == 'field'?'':'buts'" :key="index">
										<template v-if="vo.way == 'field'">
											<view v-if="vo.type=='time'">
												{{db_name_list[index1][vo.field]|getTime}}
											</view>
											<view v-if="vo.type=='content'">
												<rich-text :nodes="db_name_list[index1][vo.field]"></rich-text>
											</view>
											<view v-if="vo.type=='img'">
												<image class="b_y" @click="on_img(db_name_list[index1][vo.field])"
													:src="db_name_list[index1][vo.field]|getImg" style="height: 120rpx;"
													mode="heightFix">
												</image>
											</view>
											<view v-if="vo.type=='switch'">
												<view @click="on_switch(index1,vo.field)">
													<banmi-switch :is_state="db_name_list[index1][vo.field]"
														is_type='2'></banmi-switch>
												</view>
											</view>
											<view v-if="vo.type=='text'">
												<text>{{ db_name_list[index1][vo.field]}}</text>
											</view>
										</template>

									</uni-td>
								</uni-tr>
							</uni-table>
						</view>


					</scroll-view>
					<view class="banmi_flex a-c  p-b-10" style="padding-top: 20rpx;">
						<view class="f-14 c-7" style="width: 100px;">
						</view>
						<view class="">
							<button type="default" style="width: 80px;" size="mini" @click="subQuestion"
								class="sub_btn">确认</button>
						</view>
					</view>

				</view>


			</view>
		</view>


		<!-- 编辑搜索框组件 -->
		<uni-popup ref="edit_Search" type="center" style="z-index: 8; ">
			<scroll-view scroll-y="true" class="b_y bg-white" style="z-index: 88;margin-top: -10px;"
				:style="'width:'+  windowWidth +'px;'+ 'height:'+  windowHeight +'px'">
				<diyListSearch :where_data_find="where_data_find" :zhujian_id="zhujian_id" :windowHeight="windowHeight"
					:windowWidth="windowWidth" @img_ok="edit_Search_ok">
				</diyListSearch>
			</scroll-view>
		</uni-popup>



	</view>
</template>

<script>
	import popup from '@/uni_modules/uni-popup/components/uni-popup/popup.js'
	import diyListSearch from '@/pages/banmi/code/diy_list_search.vue';

	export default {
		components: {
			diyListSearch
		},
		name: "uniPopupDialog",
		mixins: [popup],
		emits: ['confirm', 'close'],
		props: {


		},
		data() {
			return {
				list: [],
				p_list: [],
				where_data: [],
				button_data: [{
					text: '查询',
					value: 'on_search'
				}, {
					text: '重置',
					value: 'on_search_resetting'
				}],
				is_top_height: false,
				w_width: 0,
				db_name_list: [],
				diy_list: [],
				field_type_list: [{
						text: '普通文本',
						value: 'text'
					},
					{
						text: '时间戳',
						value: 'time'
					},
					{
						text: '富文本',
						value: 'content'
					},
					{
						text: '图片',
						value: 'img'
					},
					{
						text: '视频',
						value: 'video'
					},
				],
				windowWidth: 0,
				windowHeight: 0,
				zhujian_id: '',
				where_data_find: {},
			}
		},
		mounted() {

			this.init();
			let that = this
			setTimeout(function() {
				let element = document.getElementById("bm_top_height");
				that.top_height = element.offsetHeight;
				that.is_top_height = true;
			}, 200);

		},

		methods: {
			subQuestion() {

				var find = {
					where: this.where_data,
					data: [],
					ref: {},
					vue_list: this.diy_list,
					button_data: this.button_data,
					db_name: this.dbname
				}
				this.$emit('img_ok', find)
				this.popup.close()
			},
			edit_Search_ok(item) {
				this.where_data[this.where_data_index] = item
			},
			window_windowHeight(w, h) {
				if (navigator.userAgent.indexOf('Mobile') > -1) {
					this.windowHeight = uni.getSystemInfoSync().windowHeight / 1.5;
					this.windowWidth = uni.getSystemInfoSync().windowWidth - 20;
				} else {
					this.windowHeight = uni.getSystemInfoSync().windowHeight / h;
					this.windowWidth = uni.getSystemInfoSync().windowWidth / w;
				}
			},
			on_list_del(index) {
				this.diy_list.splice(index, 1);
			},
			on_where_data(index) {
				this.window_windowHeight(2.2, 1.5);
				this.where_data_index = index
				this.where_data_find = this.where_data[index]
				this.$refs.edit_Search.open();

				this.where_data_index = index
			},
			on_where_data_del(index) {
				this.where_data.splice(index, 1);
			},
			change_dbname(dbname) {
				this.dbname = dbname;
				if (!this.dbname) {
					return
				}
				this.Banmikeji.PW_mysql_full_ajax(this.dbname).then(ret => {
					this.ziduan_list = ret;
					var diy_list = [];
					this.where_data = [];
					for (var i = 0; i < this.ziduan_list.length; i++) {
						if (this.ziduan_list[i]['Extra'] == 'auto_increment') { //主键id
							this.zhujian_id = this.ziduan_list[i]['Field'];
						}
						let type = 'text';
						let start = '2';
						let close = '1';
						let field = this.ziduan_list[i]['Field'];
						let data = [];
						if (field.indexOf("img") != -1) {
							type = 'img';
						} else if (field.indexOf("imgage") != -1) {
							type = 'img';
						} else if (field.indexOf("video") != -1) {
							type = 'video';
						} else if (field.indexOf("mp4") != -1) {
							type = 'video';
						} else if (field.indexOf("creation_time") != -1) {
							type = 'time';
						} else if (field.indexOf("content") != -1) {
							type = 'content';
						} else if (field.indexOf("open") != -1) {
							type = 'switch';
							data = [{
								"field": field,
								"where": "",
								"value_type": "前端传值",
								"value": "",
								"empty": "true",
								"verify": "",
								"verify_val": "",
								"max_number": "",
								"name": field,
								"placeholder": field,
								"key": field,
								"input_box": "text",
								"input_box_val": [],
								"class_index": '-1',
								"input_box_dbname": {},
								"start": start,
								"close": close
							}]

						} else if (field.indexOf("business_time") != -1) {
							type = 'text';
						}


						var where = [{
							"field": this.zhujian_id,
							"where": "=",
							"value_type": "前端传值",
							"value": "",
							"empty": "false",
							"verify": 0,
							"verify_id": 2,
							"verify_val": this.zhujian_id,
							"max_number": 20
						}];

						var find = {
							name: this.ziduan_list[i]['Field'],
							field: this.ziduan_list[i]['Field'],
							is_state: 1,
							type: type,
							field_type: {
								// 开 关
								'switch': {
									'start': start,
									'close': close,
									'where': where,
									'data': data

								}
							},
							way: 'field', //field  crud 操作

						}
						diy_list.push(find);

						var map = {
							"field": this.ziduan_list[i]['Field'],
							'where': 'like', //字段条件
							'value_type': '前端传值', //值类型
							'value': '', //值
							'empty': 'true', //是否可以为空
							'verify': '', //验证类型
							'verify_id': '',
							'verify_val': '', //验证值
							'max_number': '', //最大数字
							'name': '输入框',
							'placeholder': '请输入' + this.ziduan_list[i]['Field'],
							'key': this.ziduan_list[i]['Field'],
							'input_box': 'text', //编辑框类型
							'input_box_val': [],
							"class_index": '-1',
							"input_box_dbname": {
								where: [{
									'field': '', //字段
									'where': '', //字段条件
									'value_type': '', //值类型
									'value': '', //值
									'empty': true, //true=可以为空 false不可以为空
									'verify': '', //验证类型
									'verify_val': '', //验证名称 如某某不得为空
									'verify_id': '',
									'max_number': '', //最大数字
								}],
								db_name: '',
								text: '', //字段 名称
								value: '' //字段 值
							},
						}
						this.where_data.push(map);
					}


					this.init_db_list(dbname, diy_list);
				})


			},
			on_button_data_del(index) {
				this.button_data.splice(index, 1);
			},
			init_db_list(db_name, diy_list) {


				let requestParams = {
					table: db_name,
				};
				this.Http.post('/admin.Mysql/db_init_list', requestParams).then(ret => {
					var db_name_list = ret.data;
					this.db_name_list = db_name_list;
					this.diy_list = diy_list;


				})
			},
			//初始化 获取表
			init() {
				this.Banmikeji.PW_mysql_init_ajax().then(ret => {
					this.p_list = ret.data.p_list;
					this.q_list_validate = ret.data.q_list_validate;
					for (var i = 0; i < this.q_list_validate.length; i++) {
						this.q_list_validate[i]['text'] = this.q_list_validate[i]['name'];
						this.q_list_validate[i]['value'] = i;
					}
					this.h_list_validate = ret.data.h_list_validate;
					for (var i = 0; i < this.h_list_validate.length; i++) {
						this.h_list_validate[i]['text'] = this.h_list_validate[i]['name'];
						this.h_list_validate[i]['value'] = i;
					}

					for (var i = 0; i < this.p_list.length; i++) {
						this.p_list[i]['text'] = this.p_list[i]['plugin_name'];
						this.p_list[i]['value'] = this.p_list[i]['catalogue'];
					}
					this.table_info = ret.data.table_info;
					this.list = [];
					for (var i = 0; i < this.table_info.length; i++) {
						this.table_info[i]['text'] = this.table_info[i]['Name']+ '-'+ this.table_info[i]['Comment'];
						this.table_info[i]['value'] = this.table_info[i]['Name'];
						var reg = RegExp(/zenkuai_plugin/);
						if (reg.exec(this.table_info[i]['Name'])) {
							this.list.push(this.table_info[i]);
						}

					}


				})
			},
			on_close() {
				this.popup.close()
			},

		}
	}
</script>

<style>
	button {
		padding: 0;

		background: transparent;
	}

	.pass_0 {
		border: #C0C0C0 3px dashed;
		width: 465rpx;
	}

	.pass_0xz {
		border: solid 3px red;

		width: 465rpx;
	}

	.xz_boxxx {

		align-items: center;

		width: 100%;
		/* 	border: red 3px dashed; */
		border: solid 3px red;
	}

	.boxxx {

		align-items: center;

		width: 100%;
		border: #C0C0C0 3px dashed;

	}

	.top_but {
		background-color: #F8F8F8;
		width: 100%;
		height: 100rpx;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.zu_but {
		position: fixed;
		height: 100rpx;
		z-index: 999;
		background-color: #F8F8F8;
		bottom: 288rpx;
	}

	.option_box {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #999999;
		border-radius: 5px;
		margin-right: 10rpx;
		// background-color: #FF852A;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.option_box_active {
		background: linear-gradient(-30deg, #ff7029 0%, #faa307 100%);
		border: 1rpx solid #faa307 !important;
	}

	.sub_btn_add {
		margin-left: 30rpx;
		width: 150rpx;
		height: 60rpx;
		background: linear-gradient(-30deg, #A9A9A9 0%, #A9A9A9 100%);
		border-radius: 44rpx;

		font-size: 30rpx;
		font-weight: 700;
		color: #ffffff;

		line-height: 60rpx;
	}

	.xclosed {
		background: red;
		width: 30rpx;
		height: 30rpx;
		padding: 0;

	}

	.sub_btn {

		height: 70rpx;
		width: 100rpx;
		background: #0071FE;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 70rpx;
	}

	button::after {
		border: none;
	}
</style>